<template>
  <div class="customer-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>线索客户管理</span>
          <div>
            <el-button type="primary" @click="handleAdd">新增线索</el-button>
            <el-button @click="handleBatchImport">批量导入</el-button>
          </div>
        </div>
      </template>
      
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="客户名称">
            <el-input v-model="searchForm.name" placeholder="请输入客户名称" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="searchForm.contact" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value="" />
              <el-option label="待跟进" value="pending" />
              <el-option label="跟进中" value="following" />
              <el-option label="已转化" value="converted" />
              <el-option label="已放弃" value="abandoned" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="客户名称" />
        <el-table-column prop="contact" label="联系人" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="source" label="客户来源" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="owner" label="负责人" />
        <el-table-column prop="nextFollow" label="下次跟进" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleFollow(row)">跟进</el-button>
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增线索' : '编辑线索'"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="form.contact" placeholder="请输入联系人姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="客户来源" prop="source">
          <el-select v-model="form.source" placeholder="请选择客户来源" style="width: 100%">
            <el-option label="网络推广" value="network" />
            <el-option label="客户推荐" value="referral" />
            <el-option label="线下活动" value="offline" />
            <el-option label="电话营销" value="telemarketing" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
    
    <!-- 跟进记录弹窗 -->
    <el-dialog
      v-model="followDialogVisible"
      title="新增跟进记录"
      width="600px"
    >
      <el-form
        ref="followFormRef"
        :model="followForm"
        :rules="followRules"
        label-width="100px"
      >
        <el-form-item label="跟进方式" prop="type">
          <el-select v-model="followForm.type" placeholder="请选择跟进方式" style="width: 100%">
            <el-option label="电话" value="phone" />
            <el-option label="微信" value="wechat" />
            <el-option label="邮件" value="email" />
            <el-option label="面谈" value="meeting" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进内容" prop="content">
          <el-input
            v-model="followForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入跟进内容"
          />
        </el-form-item>
        <el-form-item label="下次跟进" prop="nextFollow">
          <el-date-picker
            v-model="followForm.nextFollow"
            type="datetime"
            placeholder="选择下次跟进时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="followDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFollowSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const searchForm = reactive({
  name: '',
  contact: '',
  status: ''
})

const tableData = ref([
  {
    id: 1,
    name: '北京科技有限公司',
    contact: '张经理',
    phone: '13800138000',
    source: '网络推广',
    status: 'pending',
    owner: '张三',
    nextFollow: '2024-01-15'
  },
  {
    id: 2,
    name: '上海贸易集团',
    contact: '李总',
    phone: '13900139000',
    source: '客户推荐',
    status: 'following',
    owner: '李四',
    nextFollow: '2024-01-16'
  },
  {
    id: 3,
    name: '广州电子科技',
    contact: '王经理',
    phone: '13700137000',
    source: '线下活动',
    status: 'converted',
    owner: '王五',
    nextFollow: '已转化'
  }
])

const pagination = reactive({
  current: 1,
  size: 10,
  total: 3
})

const dialogVisible = ref(false)
const dialogType = ref('add')
const formRef = ref()
const form = reactive({
  name: '',
  contact: '',
  phone: '',
  source: '',
  remark: ''
})

const rules = {
  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  source: [{ required: true, message: '请选择客户来源', trigger: 'change' }]
}

const followDialogVisible = ref(false)
const followFormRef = ref()
const followForm = reactive({
  type: '',
  content: '',
  nextFollow: ''
})

const followRules = {
  type: [{ required: true, message: '请选择跟进方式', trigger: 'change' }],
  content: [{ required: true, message: '请输入跟进内容', trigger: 'blur' }]
}

const currentRow = ref()

const getStatusType = (status) => {
  const map = {
    pending: 'warning',
    following: 'primary',
    converted: 'success',
    abandoned: 'info'
  }
  return map[status] || 'info'
}

const getStatusLabel = (status) => {
  const map = {
    pending: '待跟进',
    following: '跟进中',
    converted: '已转化',
    abandoned: '已放弃'
  }
  return map[status] || status
}

const handleSearch = () => {
  // 搜索逻辑
}

const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
}

const handleAdd = () => {
  dialogType.value = 'add'
  Object.keys(form).forEach(key => {
    form[key] = ''
  })
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogType.value = 'edit'
  Object.keys(form).forEach(key => {
    form[key] = row[key]
  })
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该线索客户吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleFollow = (row) => {
  currentRow.value = row
  Object.keys(followForm).forEach(key => {
    followForm[key] = ''
  })
  followDialogVisible.value = true
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success(dialogType.value === 'add' ? '新增成功' : '编辑成功')
      dialogVisible.value = false
    }
  })
}

const handleFollowSubmit = () => {
  followFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('跟进记录添加成功')
      followDialogVisible.value = false
    }
  })
}

const handleBatchImport = () => {
  ElMessage.info('批量导入功能开发中...')
}

const handleSizeChange = (val) => {
  pagination.size = val
}

const handleCurrentChange = (val) => {
  pagination.current = val
}
</script>

<style lang="scss" scoped>
.customer-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .search-bar {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
